<template>
  <div>
    <gray-line></gray-line>
    <div>
      <list-title :item="item"></list-title>
      <ul class="hotList-wrapper">
        <li v-for="item of hotList" :key="item.id" class="item">
          <img class="item-img" :src="item.imgUrl" alt="">
          <p class="item-title">{{item.title}}</p>
          <p class="item-price">
            <price-tag :price='item.price' :pricestyle=" { fontSize:'.28rem' } "></price-tag>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import GrayLine from './grayLine'
import ListTitle from './listTitle'
import PriceTag from './price'

export default {
  name: 'HomeHotList',
  props: ['hotList'],
  components: {
    GrayLine,
    ListTitle,
    PriceTag
  },
  data () {
    return {
      item: {
        text: '本周热门榜单',
        class: 'iconfont icon-huo'
      }
    }
  }
}
</script>
<style lang='stylus' scoped>
  .hotList-wrapper
    height 3.08rem
    overflow-x scroll
    overflow-y hidden
    padding 0 .2rem
    white-space nowrap
    .item
      width 2rem
      height 100%
      display inline-block
      position relative
      padding .1rem
      .item-img
        height 2rem
      .item-title
        margin-top: .12rem;
        color: #212121;
        font-size: .24rem;
        line-height: .32rem;
        text-align: center;
      .item-price
        margin-top: .12rem;
        text-align center
        font-size 0.24rem
</style>
